// 广告页 控制器

// 引入广告页
import advView from "@/adv.ejs";
// 引入 axios
import axios from "../api";

export default function (router) {
    // 配置广告页 二级路由
    router.route("/admin/adv", (req, res) => {
        res.render(advView());



        // 点击添加广告按钮弹出 对话框
        let adduermodel = document.querySelector(".adduermodel");  //添加广告框
        let mask = document.querySelector(".mask")  //遮罩层
        let addadv = document.querySelector(".addadv")
        addadv.onclick = function () {
            adduermodel.style.display = "flex";
            mask.style.display = "block";
        }
        // 点击 x 按钮 关闭对话框
        let closebtn = document.querySelector(".closebtn");
        closebtn.onclick = function () {
            adduermodel.style.display = "none";
            mask.style.display = "none";
        }

        // 点击上传按钮添加图片  且显示预览图
        let imgFile = document.querySelector(".imgFile");
        let showimg = document.querySelector(".imgshow")
        imgFile.onchange = function () {
            let imgobj = this.files[0]; //获取传入图片的详细信息
            console.log(imgobj);
            // 通过 FileReader 内置类将  imgobj 转为base64 数据格式
            let fileReader = new FileReader();
            fileReader.readAsDataURL(imgobj);  //通过readAsDataURL 方法转换为base64格式
            fileReader.onload = function () {
                //当转化完毕后接收转换的数据
                console.log(fileReader.result);  //通过fileReader.result 接收
                let imgEle = document.createElement("img");
                imgEle.src = fileReader.result;
                imgEle.style.height = "100px";
                imgEle.style.width = "100px";
                showimg.appendChild(imgEle)   //将图片加入到预览框中
            }
        }
        // 点击提交按钮 将数据提交到后端
        let subbtn = document.querySelector(".btn");
        let usernameEle = document.querySelector(".username");
        subbtn.onclick = async function () {
            console.log("点击了提交按钮");
            // 点击提交按钮 将参数  发送ajax
            let username = usernameEle.value; // 广告名称
            let imgfile = imgFile.files[0]    //广告图片
            console.log(username, imgfile);
            // 非空验证
            if (username == "") {
                return alert("广告名不能为空！")
            }

            if (typeof imgfile == "undefined") {
                return alert("请上传广告图片！")
            }
            // 点击提交按钮 关闭对话框
            adduermodel.style.display = "none";
            mask.style.display = "none";

            // 模拟一个空的form 表单

            let form = new FormData();
            form.append("username", username);
            form.append("myimg", imgfile);
            // 发送ajax
            let data = await axios.post("/adv/addadv", form);
            console.log(res);
            if (data.status == 1) {
                alert("添加成功！");
                adduermodel.style.display = "none";
                mask.style.display = "none";
            }
        }
    })
}
